
<!--
 * @Author: 卡卡 1071780426@qq.com
 * @Date: 2022-10-19 10:29:14
 * @LastEditors: CNN 969682281@qq.com
 * @LastEditTime: 2023-04-07 15:31:52
 * @FilePath: \backstage\src\components\public\peiNum.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="com-container makeUpEcharts he">
        <div class="com-chart" ref="echarts"></div>
    </div>
</template>
<script>
import * as echarts from 'echarts'
export default {
    props: ["commonData"],
    data() {
        return {
            chartInstance: null,
            allData: null, // 服务器返回的数据
            //   x轴数据
            xData: null,
            currentPage: 1, //当前显示页数
            totalPage: 0, // 共有多少页
            timerId: null, // 定时器标识
            p1: 0,
        };
    },
    watch: {
        commonData: function () {
            setTimeout(() => {
                this.getData();
            }, 110);
        },

        // activeIndex(val, oldVal) {
        // },
    },
    mounted() {
        setTimeout(() => {
            this.initChart();

            window.addEventListener("resize", this.screenAdapter);
            // 在页面加载完成的时候, 主动进行屏幕的适配
            this.screenAdapter();
        }, 100);
    },
    destroyed() {
        // 在组件销毁的时候, 需要将监听器取消掉
        window.removeEventListener("resize", this.screenAdapter);
    },
    methods: {
        initChart() {
            this.chartInstance = this.$echarts.init(this.$refs.echarts);
            // let XData = ['2022/01', '2022/02', '2022/03', '2022/04', '2022/05', '2022/06', '2022/07', '2022/08', '2022/09', '2022/10', '2022/11', '2022/12']
            // let valueData = {
            //     jfsbs: [805, 860, 400, 400, 400, 400, 990, 985, 990, 850, 560, 772],
            //     md: [300, 390, 290, 285, 290, 288, 790, 795, 795, 760, 660, 480],
            //     znhbl: [95, 78, 50, 60, 85, 78, 76, 70, 65, 90, 74, 66],
            // }
            const initOption = {

                tooltip: {
                    trigger: 'axis',
                    axisPointer: { // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
                        shadowStyle: {
                            shadowColor: 'rgba(60, 161, 246, 0.43)',
                            shadowBlur: 10
                        }
                    },
                    backgroundColor: '#FFFFFF',
                    borderColor: 'rgba(60, 161, 246, 0.43)',
                    borderWidth: 1,
                    shadowColor: ' rgba(111, 193, 253, 0.35)',
                    shadowBlur: 10,
                    formatter: function (params) {
                        // return params.value;
                        // let strName1 = params[0].seriesName
                        let value1 = params[0].value
                        // let strName2 = params[1].seriesName
                        let value2 = params[1].value
                        // let strName3 = params[2].seriesName
                        let value3 = params[2].value
                        return '<div><span style="color:rgba(36, 36, 36, 1);display: inline-block;width: 86px;">新增基桩数</span><span style="color:#5DB6FB">' + value1 + '</span></div><div><span style="color:rgba(36, 36, 36, 1);display: inline-block;width: 86px;">本月检测数</span><span style="color:#5DB6FB">' + value2 + '</span></div><div><span style="color:rgba(36, 36, 36, 1);display: inline-block;width: 86px;">累计完成率</span><span style="color:#5DB6FB">' + value3 + '%</span></div>'
                    },
                    textStyle: {
                        rich: {
                            name: {
                                color: "rgba(36, 36, 36, 1)",
                                fontSize: 13,
                                align: 'center'
                            },
                            percent: {
                                fontFamily: 'DIN',
                                fontWeight: 500,
                                fontSize: 22,
                                color: '#1D91F5',
                                align: 'center'
                            },
                        }
                    }
                },
                grid: {
                    left: '0%',
                    right: '1%',
                    bottom: '5%',
                    top: '16%',
                    containLabel: true
                },
                legend: {

                    top: '5%',
                    textStyle: {
                        color: "rgba(128, 125, 125, 1)",
                        // fontSize: 12
                    },
                    icon: 'rect',
                    // itemWidth: 12,
                    // itemHeight: 12,
                    // itemGap: 25,
                },
                xAxis: {
                    type: 'category',
                    //     data: XData,
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(204, 204, 204, 1)'
                        }
                    },
                    axisLabel: {
                        interval: 0,
                        // rotate: 40,
                        textStyle: {
                            color: "rgba(185, 185, 185, 1)",

                        }
                    },
                    axisTick: {
                        show: false,
                    },
                },
                yAxis: [{
                    type: 'value',
                    axisLabel: {
                        textStyle: {
                            color: "rgba(185, 185, 185, 1)"
                        }
                    },
                    axisLine: {
                        show: false,

                    },
                    axisTick: {
                        show: false,
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: 'rgba(237, 237, 237, 1)',
                            type: 'dotted'
                        }
                    },
                },
                {
                    type: "value",
                    nameTextStyle: {
                        color: "rgba(185, 185, 185, 1)"
                    },
                    position: "right",
                    max: 100,
                    axisLine: {
                        show: false,

                    },
                    splitLine: {
                        show: false,
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        show: true,
                        formatter: "{value} %", //右侧Y轴文字显示
                        textStyle: {
                            color: "rgba(185, 185, 185, 1)"
                        }
                    }
                }
                ],

                series: [{
                    name: '新增基桩数',
                    type: 'bar',
                    // barWidth: '12px',
                    itemStyle: {
                        normal: {

                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgba(141, 113, 226, 1)'
                            }, {
                                offset: 1,
                                color: 'rgba(141, 113, 226, 0.2)'
                            }]),

                        }
                    },
                    // data: valueData.jfsbs
                },
                {
                    name: '本月检测数',
                    type: 'bar',
                    // barWidth: '12px',
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgba(116, 178, 252, 1)'
                            }, {
                                offset: 1,
                                color: 'rgba(116, 178, 252, 0.2)'
                            }]),

                        }

                    },
                    // data: valueData.md
                }, {
                    name: "累计完成率",
                    type: "line",
                    smooth: true,
                    yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用

                    symbol: "emptycircle", //标记的图形为实心圆
                    symbolSize: 0, //标记的大小

                    itemStyle: {
                        color: 'rgba(65, 197, 95, 1)',
                    },
                    areaStyle: {
                        //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1,
                            [
                                {
                                    offset: 0,
                                    color: 'rgba(65, 197, 95, 0.4)',
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(255,255,255, 0)',
                                },
                            ],
                            false
                        ),
                    },

                    // data: valueData.znhbl
                }
                ]
            };
            this.chartInstance.setOption(initOption);
        },
        getData() {

            // let XData = ['2022/01', '2022/02', '2022/03', '2022/04', '2022/05', '2022/06', '2022/07', '2022/08', '2022/09', '2022/10', '2022/11', '2022/12']
            // let valueData = {
            //     jfsbs: [805, 860, 400, 400, 400, 400, 990, 985, 990, 850, 560, 772],
            //     md: [300, 390, 290, 285, 290, 288, 790, 795, 795, 760, 660, 480],
            //     znhbl: [95, 78, 50, 60, 85, 78, 76, 70, 65, 90, 74, 66],
            // }
            let valueData = {
                jfsbs: [],
                md: [],
                znhbl: []
            }
            // var rate = []
            this.xData = []
            var newTotal = []
            var testTotal = []
            this.commonData.map((item) => {
                this.xData.push(item.dates)
                valueData.jfsbs.push(item.newFoundationCount)//新增数
                valueData.md.push(item.checkedFoundationCount)//检测数
                // if (item.newFoundationCount != 0) {
                //     rate.push(item.checkedFoundationCount / item.newFoundationCount)
                // } else {
                //     rate.push(0)
                // }
            })
            newTotal = this.getTotalTail(valueData.jfsbs)//新增数总
            testTotal = this.getTotalTail(valueData.md)//检测数总

            this.commonData.map((item, index) => {

                if (newTotal[index] != 0) {
                    valueData.znhbl.push(((testTotal[index] / newTotal[index]) * 100).toFixed(2))
                } else {
                    valueData.znhbl.push(0)
                }
            })

            this.updateChart(this.xData, valueData)
        },
        getTotalTail(baseArr) {
            let setArr = [];
            let currNum = 0;
            baseArr.forEach((item, index) => {
                if (index == 0) {
                    setArr.push(baseArr[index])
                } else {
                    if (currNum) {
                        currNum = baseArr[index] + currNum
                    } else {
                        currNum = baseArr[index] + baseArr[index - 1]
                    }
                    setArr.push(currNum);
                }
            })
            return setArr
        },
        // 更新图表
        updateChart(XData, valueData) {

            var dataOption = {
                xAxis: {

                    data: XData,
                },
                series: [{

                    data: valueData.jfsbs
                },
                {

                    data: valueData.md
                }, {


                    data: valueData.znhbl
                }
                ]


            };

            this.chartInstance.setOption(dataOption);
            // tools.loopShowTooltip(this.chartInstance, dataOption, {
            //   loopSeries: true,
            // });
        },

        // 当浏览器的大小发生变化的时候, 会调用的方法, 来完成屏幕的适配
        screenAdapter() {
            // const titleFontSize = (this.$refs.echarts.offsetWidth / 100) * 3.6;
            const titleFontSize = (this.$refs.echarts.offsetWidth / 100) * 1.66;
            //   和分辨率大小相关的配置项
            const adapterOption = {
                legend: {


                    textStyle: {

                        fontSize: titleFontSize
                    },

                    itemWidth: titleFontSize,
                    itemHeight: titleFontSize,
                    itemGap: titleFontSize * 2,
                },
                xAxis: {
                    axisLabel: {
                        textStyle: {
                            fontSize: titleFontSize
                        }
                    },
                },
                yAxis: [{
                    axisLabel: {
                        textStyle: {
                            fontSize: titleFontSize
                        }
                    },
                },
                {
                    axisLabel: {
                        textStyle: {
                            fontSize: titleFontSize
                        }
                    }
                }
                ],
                series: [{
                    barWidth: titleFontSize,
                }, {
                    barWidth: titleFontSize,
                }, {}]
            };
            this.chartInstance.setOption(adapterOption);
            // 手动的调用图表对象的resize 才能产生效果
            this.chartInstance.resize();
        },
    },
};
</script>

<style lang="less" scoped>

</style>
